<template>
  <div id="title-abstract" :style="themStyle">
    <div class="abstract-content" v-for="(abs, index) in showNotice" :key="index">
      <div class="title">
        <a :href="abs.link" target="_blank">
          {{ abs.subject }}
        </a>
      </div>
      <div class="zw">{{ abs.content }}</div>
      <div class="footer">
        <span class="time" v-if="options.rowList.includes('publishDate')"
          ><span>{{ abs.createDate }}</span></span
        >
        <span class="section" v-if="options.rowList.includes('type')"
          ><span>{{ abs.type }}</span></span
        >
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TitleAbstract',
    props: {
      notices: {
        type: Object,
      },
      options: {
        type: Object,
      },
    },
    data() {
      return {
        showNotice: null,
      };
    },
    computed: {
      themStyle() {
        return {
          background: this.options.backgroundColor,
        };
      },
    },
    mounted() {
      // console.log(this.notices, 'notices');
      this.showNotice = this.notices.datas.slice(0, +this.options.count);
    },
  };
</script>

<style scoped lang="scss">
  #title-abstract {
    width: 100%;
    height: 100%;
    padding: 10px;
  }

  .abstract-content {
    position: relative;
    min-height: 100px;
    padding-top: 10px;
    border-bottom: 1px solid #2490f8;

    .title {
      cursor: pointer;
    }

    .title:hover {
      color: #2490f8;
    }

    .zw {
      margin-top: 10px;
      font-size: 12px;
      color: #999;
    }

    .footer {
      position: absolute;
      bottom: 5px;
      font-size: 12px;
      color: #999;

      .time {
        margin-right: 10px;
      }
    }
  }
</style>
